<template>
  <el-container>
    <el-aside width="200px">
      <el-row>
        <el-col :span="24">
          <el-button
            v-for="item in data"
            :key="item.label"
            @click="confirmed(item.label)"
            :disabled="item.selected"
          >
            {{ item.label }}
          </el-button>
        </el-col>
      </el-row>
    </el-aside>
    <el-main>
      <div class="main">
        <el-button
          v-for="item in data.filter((currentValue) => {
            return currentValue.selected;
          })"
          :key="item.label"
          @click="cancel(item.label)"
        >
          {{ item.label }}
        </el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  props: {
    //data应该是一个数组 selected boolean value: ''
    data: {
      type: Array,
      default: [],
    },
  },
  methods: {
      cancel(label){
          for(let i in this.data){
              if(this.data[i].label==label){
                  this.$set(this.data[i],'selected',false)
              }
          }
      },
      confirmed(label){
          for(let i in this.data){
              if(this.data[i].label==label){
                  this.$set(this.data[i],'selected',true)
              }
          }
      },
  }
};
</script>

<style scoped>
.el-button {
  width: 150px;
}
.el-button + .el-button {
  margin: 0;
}
.el-row {
  max-height: 250px;
  overflow-y: scroll;
}
.main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}
</style>